<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<title>管理平台</title>
<style type="text/css">
.chooseBtn {
	display: none;
}

.choose-label {
	box-shadow: #ccc 0px 0px 0px 1px;
	width: 40px;
	height: 20px;
	display: inline-block;
	border-radius: 20px;
	position: relative;
	background-color: #bdbdbd;
	overflow: hidden;
}

.choose-label:before {
	content: '';
	position: absolute;
	left: 0;
	width: 20px;
	height: 20px;
	display: inline-block;
	border-radius: 20px;
	background-color: #fff;
	z-index: 20;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.chooseBtn:checked+label.choose-label:before {
	left: 20px;
}

.chooseBtn:checked+label.choose-label {
	background-color: #51ccee;
}
</style>





<jsp:include page="../../include/header.jsp"></jsp:include>
<!-- jquery tree table -->
<link
	href='${BASE_PATH}/static/plugins/jquery-treetable/css/jquery.treetable.css'
	media='all' rel='stylesheet' type='text/css' />
</head>
<body>
	<div id="wrapper">
		<jsp:include page="../../include/nav.jsp"></jsp:include>
		<div id="page-wrapper">
			<div class="row">
				<div class="col-lg-12">
					<h1 class="page-header">专题列表</h1>
					<div class="pull-right">
						<!-- <input type="button" onclick="javascript:window.location.reload()"
							value="刷新" /> -->
						<button type="button"
							onclick="javascript:window.location.reload()"
							class="btn btn-success btn-lg btn-refresh">
							<span class="fa fa-refresh fa-lg"></span>
						</button>
					</div>
				</div>
			</div>

			<!-- 搜索框 -->
			<div class="row">
				<div class="col-lg-offset-2 col-lg-9">
					<label class="search-label">专题标题:</label> <input type="text"
						id="ltitle" value="" class="form-control search-input width200"
						maxlength="21" placeholder="专题关键字"><label
						class="search-label">专题分类:</label>
					<div class="search-input">
						<select id="rstate" class="selectpicker form-control">
							<!-- <option value="0" selected>全部</option>
							<option value="1">推荐</option>
							<option value="2">未推荐</option> -->
						</select>
					</div>
					<button class="btn btn-success search-btn" onclick="query();">确定</button>
					<button class="btn btn-success search-btn" onclick="reset();">重置</button>
					<div class="clearfix"></div>
				</div>
			</div>


			<div class="row">
				<div class="col-lg-12">
					<div class="row">
						<div class="text-muted single-line-text pull-left">
							共 <font color="#428bca" id="dataCount">0</font> 条记录
						</div>

						<div style="float: right; margin-right: 30px;">
							<div class="pull-right">
								<button type="button" class="btn btn-success" onclick="toAdd(1)">
									<span class="fa fa-plus"></span> 发布专题
								</button>
								<button type="button" class="btn btn-success" onclick="doSort() ">
									<span class="fa fa-save"></span> 保存排序
								</button>
							</div>
						</div>
					</div>

					<div class="table-responsive">
						<form id="sortForm" action="${BASE_PATH}/spike/recommend/doSort"
							method="post">
							<input type="hidden" name="sortKey" value="orderNo">
							<!-- <input
								type="checkbox" id="selectAll" />全选 -->
							<table id="dataTable" class="table table-striped table-hover">

								<thead>
									<tr>

										<!-- <th>多选</th> -->
										<th>编号</th>
										<th>封面图片</th>
										<th>标题</th>
										<th>分类</th>
										<th>相关单品</th>
										<th>推荐</th>
										<th>发布时间</th>
										<th>相关</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="dataList"></tbody>
							</table>
						</form>
					</div>
					<div class="row">
						<div class="col-lg-12">
							<ul id="dataPagination" class="pagination-sm pull-right"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<jsp:include page="../../include/footer.jsp"></jsp:include>
	</div>
	<jsp:include page="../../include/javascripts.jsp"></jsp:include>
	<!-- 异步加载下一页数据后，用模板渲染 -->
	<!-- <td><input type="checkbox" id="checkcode" name="checkcode" value="{{item.id}}" ></td> -->
	<script type="text/html" id="dataTbl">
{{each list as item}}
<tr id="item{{item.id}}" data-id="{{item.id}}">
		<td>{{item.id}}</td>
		<td>{{item.sellerName}}</td>	
		<td>{{item.recommend | flagTransform:1,'推荐',0,'不推荐'}}</td>
		<td><input name="orderNo{{item.id}}" value="{{item.orderNo}}" size="3" class="order form-control width50" required></td>		
 		<td><button type="button" class="btn btn-sm btn-primary btn-simple" onclick="toEdit('{{item.id}}')" title="置顶"><span class="fa fa-edit fa-lg"></span></button><button type="button" class="btn btn-sm btn-danger btn-simple" onclick="toDelete('{{item.id}}')" title="删除"><span class="fa fa-remove fa-lg">删除</span></button> 
</td>
	</tr>
	{{/each}}
</script>
	<!-- <td>{{if item.recommend>0}}<input type="checkbox" name="check" id="{{item.id}}" checked class="chooseBtn" onclick="return false;" /><label for="{{item.id}}" class="choose-label"></label>{{/if}}{{if item.recommend==0}}<input type="checkbox" name="check" id="{{item.id}}" class="chooseBtn" onclick="return false;" /><label for="{{item.id}}" class="choose-label"></label>{{/if}}</td> -->

	<script type="text/javascript">
		var dataPaginator;
		$(query);
		function query() {
			var params = {
				pageSize : 10,
				group : 1,
				title : $("#ltitle").val(),
				state : $("#rstate").val()
			};
			if (dataPaginator) {
				dataPaginator.destroy();
			}
			dataPaginator = Kit.pagination("#dataPagination",
					"${BASE_PATH}/spike/recommend/page", params, function(
							result) {
						/* console.log(result);
						console.log(result.object.totalRow); */
						//设置显示最新的数据数量
						$("#dataCount").html(result.object.totalRow);
						//根据模板渲染数据并填充
						$("#dataList").empty().append(
								template("dataTbl", result.object));
					});

		}
		function reset() {
			$("#ltitle").val("");
		}

		/*  
		$("#data").change(function(){
		   
		    var value = $("#data").val();
		    if(value != null){
		     $.ajax({ 
		            type:"post", 
		            url:url, 
		            dataType:"json", 
		            data:{'data':value},
		            async:false,
		             success:function (){},
		            error: function () { 
		                   alert('连接超时！');
		            }  
		        });   
		    }
		}
		 */

		/* 实现全选和全不选 ,暂时不做*/
		/* $("#selectAll").on('click', function() {
			$("input[name='checkcode']").prop("checked", this.checked);

		});

		$("input[name='checkcode']").on(
				'click',
				function() {
					var $checkecodes = $("input[name='checkcode']");
					$("#selectAll").prop(
							"checked",
							$checkcodes.length == $checkcodes
									.filter(":checked").length ? true : false);
				}); */

		var addDialog
		function toAdd(group) {
			addDialog = Kit.dialog("添加品牌",
					"${BASE_PATH}/spike/recommend/toAdd/" + group).open();
		}

		var editDialog
		function toEdit(id) {
			editDialog = Kit.dialog("置顶",
					"${BASE_PATH}/spike/recommend/toEdit/"+id).open();

		}

		/* var addGoodsDialog;
		function toAddGoods(id) {
			addGoodsDialog = Kit.dialog("添加商品", "${BASE_PATH}/spike/list/toAddGoods/"+id).open();
		} */

		function toDelete(id) {
			Kit.confirm("提示", "您确定要删除这条数据吗？", function() {
				$.post("${BASE_PATH}/spike/recommend/doDelete/"+id, function(
						result) {
					$("#item" + id).remove();
				});
			});
		}

		function doSort() {
			$("#sortForm").ajaxSubmit({
				success : function(data) {
					switch (data.flag) {
					case -1:
						Kit.alert("网络繁忙...，请重试");
						return;
					case 0:
						window.location.reload();
					}
				}
			});
		}

		/* <input type="hidden" id="group" name="group" value="1"> */
		/* $(function() {
			$("#selectAll").click(function() {
				$(":checkbox[name='checkcode']").prop("checked", this.checked);
			});
		});
		 */
		/* function select() {
			$("#selectAll").click(function() {
				$("#checkcode").prop("checked", this.checked);
			});
		} */
	</script>
</body>
</html>